<template>
	<view class="confirm-write-offs">
		<!-- <view class="user flex-align">
			<view style="margin-right: 20rpx;">
				<image :src="uInfolist.head_pic" style="width: 80rpx;height: 80rpx;border-radius: 50% 50%;" mode=""></image>
			</view>
			<view>
				<view class="user-name">{{uInfolist.username}}</view>
				<view class="tel">{{uInfolist.phone}}</view>
			</view>
		</view> -->
		<view class="list222" v-if="selected_Tab == 1">
			<view class="item flex-align">
				<view style="display: flex;flex-direction: row;align-items: center;width: 100%;"
					:class="{ 'cursor-not-allowed': offlist.disableFlag == 1 }">
					<view class="">
						<image style="width:130rpx;height:140rpx;" :src="offlist.picture" mode=""></image>
					</view>
					<view
						style="display: flex; flex-direction: column; justify-content: space-between;margin-left: 20rpx;width: 100%;"
						:class="{ 'text-gray': offlist.disableFlag == 1 }">
						<view class="text_12" style="margin-top: 10rpx;display: flex; justify-content: space-between;">
							<view class="">
								<text style="margin-right: 10rpx;">{{offlist.code_no || ''}}</text>
								<text style="margin-right: 10rpx;">{{offlist.card_type_show || ''}}</text>
							</view>
							<text style="color: #ff4817;">可用：{{offlist.leftnum || 0}}</text>
						</view>
						<view class="text_12">{{offlist.ticket_name}} <text
								v-if="offlist.applicable !== ''">({{offlist.applicable}})</text> </view>
						<view class="text_12">项目:{{offlist.projects_text}}</view>
						<view class="text_12">有效期：{{offlist.startdate}} ~ {{offlist.enddate}}</view>
						<view class="text_12" v-if="offlist.sell_start_time">{{offlist.sell_start_time}} ~
							{{offlist.sell_end_time}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list222" v-if="selected_Tab == 2">
			<view class="item flex-align">
				<view style="display: flex;flex-direction: row;align-items: center;width: 100%;"
					:class="{ 'cursor-not-allowed': offlist.disableFlag == 1 }">
					<view class="">
						<image style="width:130rpx;height:140rpx;" :src="offlist.picture" mode=""></image>
					</view>
					<view
						style="display: flex; flex-direction: column; justify-content: space-between;margin-left: 20rpx;width: 100%;"
						:class="{ 'text-gray': offlist.disableFlag == 1 }">
						<view class="text_12"
							style="margin-top: 10rpx;color: #ff4817;display: flex; justify-content: space-between;">
							<text>{{offlist.code_no || ''}}</text>
							<text>{{offlist.card_type_show || ''}}</text>
						</view>
						<view class="text_12" style="display: flex; justify-content: space-between;">
							<text>{{offlist.card_name}}</text>
							<text v-if="offlist.cardtype == 1 || offlist.cardtype == 4">余次：{{offlist.leftnum}}次</text>
							<text v-if="offlist.cardtype == 2">剩余：{{offlist.left_time}}天</text>
							<text v-if="offlist.cardtype == 3">余额：{{offlist.account_balance}}元</text>
						</view>
						<view class="text_12">项目:{{offlist.projects_text}}</view>
						<view class="text_12" v-if="offlist.sales_uname != ''">销售顾问：{{ offlist.sales_uname }}
						</view>
						<view class="text_12">有效期：{{offlist.startdate}} ~ {{offlist.enddate}}</view>
						<view class="text_12" v-if="offlist.cardstate === 1">{{offlist.card_state_show}}</view>
						<view class="text_12" v-if="offlist.cardstate !== 1 && offlist.cardstate !== 2">
							{{offlist.card_state_show}}{{offlist.card_state_show}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list222" v-if="selected_Tab == 3">
			<view class="item flex-align">
				<view style="display: flex;flex-direction: row;align-items: center;  "
					:class="{ 'cursor-not-allowed': offlist.disableFlag == 1 }">
					<view class="">
						<image style="width:130rpx;height:140rpx;" :src="offlist.picture" mode=""></image>
					</view>
					<view
						style="display: flex; flex-direction: column; align-items: baseline; justify-content: space-around;margin-left: 20rpx;"
						:class="{ 'text-gray': offlist.disableFlag == 1 }">
						<view class="text_12" style="margin-top: 10rpx;color: #ff4817;">{{offlist.code_no}}
							<text>{{offlist.card_type_show || ''}}</text>
						</view>
						<view class="text_12">{{offlist.card_name}}

							<text v-if="offlist.cardtype == 1 || offlist.cardtype == 4">余次：{{offlist.leftnum}}次</text>
							<text v-if="offlist.cardtype == 2">剩余：{{offlist.left_time}}天</text>
							<text v-if="offlist.cardtype == 3">余额：{{offlist.account_balance}}元</text>
						</view>
						<view class="text_12">持卡人：{{offlist.username}}
							<text>销售顾问：{{ offlist.sales_uname }}</text>
						</view>
						<view class="text_12">有效期：{{offlist.startdate}} ~ {{offlist.enddate}}</view>
						<view class="text_12" v-if="offlist.cardstate === 1">{{offlist.card_state_show}}</view>
						<view class="text_12" v-if="offlist.cardstate !== 1 && offlist.cardstate !== 2">
							{{offlist.card_state_show}}{{offlist.card_state_show}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list222" v-if="selected_Tab == 4">
			<view class="item flex-align">
				<view style="display: flex;flex-direction: row;align-items: center;width: 100%;"
					:class="{ 'cursor-not-allowed': offlist.disableFlag == 1 }">
					<view class="">
						<image style="width:130rpx;height:140rpx;" :src="offlist.cover" mode=""></image>
					</view>
					<view style="display: flex;flex-direction: row;align-items: center;width: 100%;"
						:class="{ 'cursor-not-allowed': offlist.disableFlag == 1 }">
						<view class="">
							<image style="width:130rpx;height:140rpx;" :src="offlist.cover" mode=""></image>
						</view>
						<view
							style="display: flex; flex-direction: column;justify-content: space-between;margin-left: 20rpx;width: 100%;"
							:class="{ 'text-gray': offlist.disableFlag == 1 }">
							<view class="text_12" style="margin-top: 10rpx;">{{offlist.name}} </view>
							<view class="text_12" style="color: #ff4817;">{{offlist.item_name}}
							</view>
							<view class="text_12" style="display: flex; justify-content: space-between;width: 100%;">
								<text>已上：{{ offlist.num }}</text>
								<text>余课：{{offlist.leftnum}}</text>
							</view>
							<view class="text_12" style="color: #ff4817;">{{offlist.code_no}}
							</view>
							<view class="text_12" style="display: flex; justify-content: space-between;width: 100%;">
								<text>{{offlist.class_name || ''}}</text>
								<text style="margin-left: 20rpx;">{{offlist.student_name || ''}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="section_1">
			<!-- <view class="section_2 flex-space-between">
				<view class="flex-align">
					<view>
						<view class="text_4">{{codelist.code_name}}</view>
						<view class="text_5" v-if="codelist.code_less">剩余{{codelist.code_less}}</view>
					</view>
				</view>
				<text class="text_6">{{hand}}</text>
			</view> -->

			<view class="tab-filter">
				<view class="item flex-align tabs">
					<view class="tab-item" :class="{'active': add_Tab == item.id}" v-for="(item, index) in tabList"
						:key="index" @click="selectedTab(item,index)">
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>

			<view class="section_3">
				<!-- <view class="text_7">核销次数</view> -->

				<!-- <view class="group_9 flex-center">
					<u-number-box :min="1" v-model="value" @change="valChange" :disabledInput="true"
						:disablePlus="true"></u-number-box>
				</view> -->



				<!-- <scroll-view class="list" scroll-y> -->
				<view class="list" v-if="selected_Tab == 4">
					<!-- <view class="item flex-align"  v-if="add_Tab == 1">
						<input type="text" placeholder="公式" class="flex-grow-1" disabled v-model="occupation_relation"
							@click="showoccupation = true" />
						<view class=""
							style="width: 60rpx;height: 50rpx;display: flex; align-items: center; justify-content: flex-end;"
							@click="del_shoupai">
							<van-image width="25rpx" height="25rpx" @click="del_shoupai"
								src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391247793773483581.png" />
						</view>
					</view> -->
					<view class="item flex-align" v-if="add_Tab == 2">
						<input type="text" placeholder="请输入核销数量" class="flex-grow-1" v-model="total_num" />
					</view>
					<view class="item flex-align" v-if="add_Tab == 1">
						<input type="text" class="flex-grow-1" v-model="multiKeyNo" placeholder="请刷手牌"
							@confirm="addOneKey" />
					</view>
					<view class="item flex-align">
						<input type="text" placeholder="备注" class="flex-grow-1" v-model="remark" />
					</view>
				</view>
				<view class="list" v-else>
					<view class="text_7" @click="addtrain">
						<button type="default"
							style="width: 170rpx;height: 70rpx;font-size: 26rpx;background-color: #4786fe;color: #ffffff;">配置公式</button>
					</view>
					<view class="item flex-align">
						<input type="text" placeholder="公式" class="flex-grow-1" disabled v-model="occupation_relation"
							@click="showoccupation = true" />
						<view class=""
							style="width: 60rpx;height: 50rpx;display: flex; align-items: center; justify-content: flex-end;"
							@click="del_shoupai">
							<van-image width="25rpx" height="25rpx" @click="del_shoupai"
								src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391247793773483581.png" />
						</view>
					</view>
					<view class="item flex-align" v-if="add_Tab == 2">
						<input type="text" placeholder="请输入核销数量" class="flex-grow-1" v-model="total_num" />
					</view>
					<view class="item flex-align" v-if="add_Tab == 1">
						<input type="text" class="flex-grow-1" v-model="multiKeyNo" placeholder="请刷手牌"
							@confirm="addOneKey" />
					</view>
					<view class="item flex-align">
						<input type="text" placeholder="备注" class="flex-grow-1" v-model="remark" />
					</view>
					<view class="" style="display: flex;flex-direction: row;margin-top: 20rpx;">
						<view class="">
							数量 x {{multiBraceletlist.length}}
						</view>
						<view class="">
							押金: ￥{{sumnum}}
						</view>
					</view>
				</view>
				<!-- </scroll-view> -->
			</view>

			<view class="section_8" v-if="multiBraceletlist.length>0">
				<view class="box2 row" style="align-content: flex-start">
					<view v-for="(item, index) in multiBraceletlist" :key="index" style="">
						<!-- <uni-tag closable @close="delOneKey(index)" style="height: 50px; margin: 10px">
							<view class="keyname" :style="{ color: item.sex == 1? '#409eff' : '#f56c6c' }">
								{{ item.outer_code }}
							</view>
						</uni-tag> -->
						<u-tag :text="item.outer_code" size="large" closable :show="true" @close="delOneKey(index)"
							:type="item.sex == 1? 'success' : 'error'" />
					</view>
				</view>
			</view>
		</view>

		<view class="btn" v-if="selected_Tab == 1">
			<van-button round block color="linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246) 100%)"
				@click="onClick1">立即核销</van-button>
		</view>
		<view class="btn" v-if="selected_Tab == 2">
			<van-button round block color="linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246) 100%)"
				@click="onClick2">立即核销</van-button>
		</view>
		<view class="btn" v-if="selected_Tab == 3">
			<van-button round block color="linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246) 100%)"
				@click="onClick3">立即核销</van-button>
		</view>
		<view class="btn" v-if="selected_Tab == 4">
			<van-button round block color="linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246) 100%)"
				@click="onClick4">立即核销</van-button>
		</view>
		<!-- <view class="btn" v-if='!btnif'>
			<van-button round block
				color="linear-gradient(0deg, rgb(198, 198, 198) 0%, rgb(156, 156, 156) 100%)">立即核销</van-button>
		</view> -->
		<u-popup @touchmove.stop :show="EliminatioPopup" @close="EliminatioPopup = false" closeOnClickOverlay
			mode="center" :safeAreaInsetBottom="false" round="15">
			<view class="tab-filter" style="font-size: 24rpx;text-align: center;margin-top: 20rpx;">
				<text>计费公式(勾选相应的计费公式添加到我的计费公式列表)</text>
			</view>
			<scroll-view class="storepopup" style="height: 60vh;padding: 40rpx 20rpx 20rpx 20rpx;width: 660rpx;"
				scroll-y>
				<view class="scroll-view_H" scroll-y="true">
					<checkbox-group shape="circle">
						<label class="item " v-for="(item, index) in studentList" :key="index"
							@click="radioChecked(index, item)">
							<view class="flex-between" style="margin-bottom: 20rpx;">
								<view class="flex-align">
									<view class="info">
										<!-- <view class="name">运动项目：{{ item.withItems.item_name||'' }}</view> -->
										<view class="name" style="margin-top: 10rpx;">
											<text>运动项目：{{ item.withItems.item_name||'' }}</text>
											<text style="margin-left: 20rpx;">定价：{{ item.price || '' }}</text>
										</view>
										<view class="name" style="margin-top: 10rpx;">
											<text>计费人群：{{ item.withCrowd.crowd_name }}</text>
											<text
												style="margin-left: 20rpx;">场次时段：{{ item.withTime.time_name || '' }}</text>
										</view>
										<view class="name" style="margin-top: 10rpx;">
											<text>限时分钟：{{ item.withTime.duration }}</text>
											<text style="margin-left: 20rpx;">每日库存：{{ item.day_stock || '' }}</text>
										</view>
									</view>
								</view>
								<view class="radioBox" style="padding-left: 34rpx">
									<checkbox color="#2f75fa" :value="item.id" :checked="item.checked"
										:disabled="item.disabled" />
								</view>
							</view>

						</label>
					</checkbox-group>
					<view style="width: 100%;height: 130rpx;"></view>
				</view>
			</scroll-view>
			<view class="enroll-detail-footer">
				<view class="footer " style="padding: 20rpx;">
					<view class="" style="display: flex;flex-direction: row;">
						<button type="default" @click="offclasses"
							style="width: 170rpx;height: 70rpx;font-size: 26rpx;background-color: #d0d0d0;color: #ffffff;">取消</button>
						<button type="default" @click="onclasses"
							style="width: 170rpx;height: 70rpx;font-size: 26rpx;background-color: #4786fe;color: #ffffff;">确认添加</button>
					</view>

				</view>
			</view>
		</u-popup>
		<u-picker :show="showoccupation" :columns="occupation_status" keyName="concatenatedInfo"
			@confirm="addoccupation" @cancel="showoccupation = false">
		</u-picker>
		<u-popup @touchmove.stop :show="showInfo" @close="closeInfo" closeOnClickOverlay mode="bottom" style=""
			round="15">
			<view class="store-popup">
				<view class="title flex-between">
					<u-tabs :list="list1" :activeStyle="{ fontWeight: 700 }" :inactiveStyle="{ color: '#999999' }"
						@click="tabClick"></u-tabs>
					<u-icon @click="closeInfo" name="close-circle-fill" color="#dde3e8" size="18"></u-icon>
				</view>
				<view class="form" v-if="not_use == 0" scroll-y="true">
					<view class="tag-list">
						<view v-for="(item2, index2) in payList" :key="index2" @click="selectSpec3(index2, item2)"
							style="display: flex;flex-direction: column; ;align-items: center;  justify-content: center; flex-wrap: wrap;padding-right: 20rpx;">
							<view class="spec-value" :class="index2 ==spcindex3 ? 'text_color' : ''">
								{{ item2.name }}
							</view>
						</view>
					</view>
				</view>
				<view class="form" v-if="not_use == 1" scroll-y="true">
					<view class="tag-list">
						<view v-for="(item2, index2) in pay_List" :key="index2" @click="selectSpec4(index2, item2)"
							style="display: flex;flex-direction: column; ;align-items: center;  justify-content: center; flex-wrap: wrap;padding-right: 20rpx;">
							<view class="spec-value" :class="index2 == spcindex4 ? 'text_color' : ''">
								{{ item2.name }}
							</view>
						</view>
					</view>
				</view>

				<view class="footer1">
					<view class="btn" @click="href">确认支付</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const venues = require("@/api/venues/venues.js");
	export default {
		data() {
			return {
				noClick: true,
				value: 0,
				hand: '', //手牌码
				op: '',
				codelist: [],
				uInfolist: '',
				btnif: true,
				offlist: {},
				selected_Tab: '',
				tabList: [{
						id: 1,
						title: "刷手牌"
					},
					{
						id: 2,
						title: "无手牌"
					}
				],
				add_Tab: 1,
				occupation_relation: '',
				occupation_relation_id: '',
				showoccupation: false,
				occupation_status: [],
				EliminatioPopup: false,
				studentList: [],
				students: [],
				multiKeyNo: '',
				bracelet_num: 0,
				multiBraceletlist: [],
				consume_num: 0,
				bracelet_ids: [],
				bracelet_no: [],
				remark: '',
				occupation_relationlist: [],
				discount: 100,
				price: '0.00',
				total_num: 1,
				pay_List: [],
				list1: [{
						name: "扫码支付"
					},
					{
						name: "记账"
					},
				],
				not_use: 0,
				paylist: {},
				spcindex3: 0,
				spcindex4: 0,
				showInfo: false,
				payChoose: {},
				formula_id: 0,
				formattedDate: '',
				sumnum: 0,
				consumelist: {}
			}
		},
		onLoad(options) {
			const selectionArrs = JSON.parse(decodeURIComponent(options.selectionArr))
			this.offlist = selectionArrs
			this.venue_id = options.venue_id
			this.selected_Tab = options.selected_Tab
			this.formattedDate = options.formattedDate
			console.log(this.offlist, 'this.offlist')
			this.formulamy()
		},
		onShow() {},
		methods: {
			async href() {
				let params = {
					account_money: this.sumnum,
					account_payid: this.payChoose.id,
					decimal_money: this.consumelist.decimal_money,
					order_id: this.consumelist.id,
					order_money: this.consumelist.order_money,
					order_number: this.consumelist.order_id,
					pay_code: "",
					pay_method: this.consumelist.pay_method,
					pay_type: '000',
					preferential_money: this.consumelist.preferential_money,
					remark: this.remark,
					scanCodePayId: '',
					scanQrCode: "",
					venue_id: this.consumelist.venue_id,
					total_amount: this.sumnum,
				}
				console.log(params, 'params')
				let res = await venues.orderMultiPay(params)
				if (res.code === 1) {
					uni.$u.toast(res.info)
					this.showInfo = false
					setTimeout(() => {
						uni.navigateBack();
					}, 1000)
				}

			},
			delOneKey(index) {
				this.multiBraceletlist = this.multiBraceletlist
				this.multiBraceletlist.splice(index, 1)

				this.bracelet_ids.splice(index, 1);
				this.bracelet_no.splice(index, 1);

				// 重新计算总和
				let sum = 0;
				this.multiBraceletlist.forEach(item => {
					sum += parseFloat(item.deposit);
				});
				this.sumnum = sum
				console.log(sum, 'sum');
			},
			async addOneKey() {
				let that = this;
				this.bracelet_num = this.multiBraceletlist.length
				let data = {
					venue_id: this.venue_id,
					bracelet_num: this.bracelet_num,
					code: this.multiKeyNo,
					pro_id: this.offlist.id,
					tab: this.selected_Tab,
				};
				let result = await venues.venueinfo(data);
				if (result.code == 1) {
					let data = result.data
					console.log(data, this.offlist, 'data')
					if (this.offlist.cardtype == 2 && this.multiBraceletlist.length > 0) {
						uni.$u.toast('时间卡只能刷一个手环')
						// form.keyno = ''
						return
					}
					//防止重复手牌
					console.log(data, 'data11')
					let chongfulog = false;
					console.log(data, 'data22')
					this.multiBraceletlist.forEach(item => {
						if (item.id == data.id) {
							console.log(data, 'data33')
							chongfulog = true
						}
					})
					console.log(this.multiBraceletlist, 'data44')
					if (!chongfulog) {
						console.log(data, 'data55')
						uni.$u.toast('添加手环成功')
						this.bracelet_ids.push(data.id)
						this.bracelet_no.push(data.inner_code)
						this.multiBraceletlist.push({
							id: data.id,
							inner_code: data.inner_code,
							outer_code: data.outer_code,
							sex: data.sex,
							deposit: data.deposit
						})
						this.consume_num = this.multiBraceletlist.length
						// this.ticketMemo.leftnum--
						let sum = 0;
						this.multiBraceletlist.forEach(item => {
							sum += parseFloat(item.deposit);
						});
						this.sumnum = sum
						console.log(sum, 'sum')
					} else {
						uni.$u.toast('重复手环')
					}
					this.multiKeyNo = ''
				} else {
					uni.$u.toast(result.info)
					this.multiKeyNo = ''
					return
				}
			},
			offclasses() {
				this.EliminatioPopup = false
			},
			addtrain() {
				this.EliminatioPopup = true
				this.formulaindex()
			},
			radioChecked(index, item) {
				this.applicantlist = []
				item.checked = !item.checked
				this.selectLength = this.studentList.filter(item => item.checked).length || 0
				this.studentList.forEach((el, idx) => {
					if (el.checked) {
						this.applicantlist.push(el.id)
					}
				})
				this.applicant = this.applicantlist.toString()
			},
			async onclasses() {
				this.students = []
				this.occupation_status = []
				this.occupation_relation = ''
				this.studentList.forEach((item) => {
					if (item.checked == true) {
						this.students.push(item);
					}
				});
				this.students.forEach(item => {
					const crowdName = item.withCrowd ? item.withCrowd.crowd_name : '';
					const timeName = item.withTime ? item.withTime.time_name : '';
					const itemName = item.withItems ? item.withItems.item_name : '';
					const price = item.price || '';
					item.concatenatedInfo = `${itemName}${crowdName}${timeName}${price}`;
				});
				this.occupation_status.push(
					this.students
				)
				this.EliminatioPopup = false
			},
			// 职业
			addoccupation(e) {
				this.occupation_relation = e.value[0].concatenatedInfo
				this.occupation_relation_id = e.value[0].id
				this.formula_id = e.value[0].id
				this.occupation_relationlist = e.value[0]
				this.price = e.value[0].price
				this.showoccupation = false
			},
			async formulamy() {
				let that = this;
				let data = {
					venue_id: this.venue_id,
				};
				let result = await venues.formulamy(data);
				if (result.code == 1) {
					const list = result.data.list; // 假设接口返回的数据在 result.data.list 中
					list.forEach(item => {
						const crowdName = item.withCrowd ? item.withCrowd.crowd_name : '';
						const timeName = item.withTime ? item.withTime.time_name : '';
						const itemName = item.withItems ? item.withItems.item_name : '';
						const price = item.price || '';
						item.concatenatedInfo = `${itemName}${crowdName}${timeName}${price}`;
					});
					this.list = result.data.list; // 假设 this.list 是用于展示数据的数组
					this.occupation_status.push(
						result.data.list
					)
				}
			},
			async formulaindex() {
				let that = this;
				let data = {
					venue_id: this.venue_id,
				};
				let result = await venues.formulaindex(data);
				if (result.code == 1) {
					this.studentList = result.data.list
				}
			},
			async formulasave() {
				let that = this;
				let data = {
					venue_id: this.venue_id,
					rows: this.students
				};
				let result = await venues.formulasave(data);
				if (result.code == 1) {}
			},
			selectedTab(item, index) {
				this.multiBraceletlist = []
				this.sumnum = 0
				this.add_Tab = item.id
			},
			async info() {
				let that = this;
				let data = {
					code_no: this.hand,
					op: this.op,
				};
				let result = await venues.info(data);
				if (result.code == 1) {
					this.codelist = result.data.list[0]
					this.uInfolist = result.data.uInfo
				} else {
					this.btnif = false
				}
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			getTotalPrice() {
				if (this.offlist.cardtype == 3) {
					this.discount = this.offlist.commodity_discount;
				}
				console.log(this.discount, '111', this.offlist.commodity_discount, '222', this.offlist.cardtype)
				let total_price = Math.round((this.discount * this.price / 100) * (this
					.consume_num < 1 ? 1 : this.consume_num));
				console.log(total_price, 'total_price')
				return total_price.toFixed(2);
			},
			async onClick1() {
				console.log(this.multiBraceletlist)
				console.log(this.offlist, 'this.offlist')
				console.log(this.occupation_relationlist)
				let that = this;

				//如果发放手环，那么手环数量要和填写的数量一致
				if (this.add_Tab == '1') {
					this.consume_num = this.bracelet_ids.length
					if (this.consume_num < 1) {
						uni.$u.toast('请刷手牌！')
						return
					}
				}
				if (this.add_Tab == '2') {
					this.consume_num = this.total_num
					if (this.consume_num < 1) {
						uni.$u.toast('请输入核销数量！')
						return
					}
				}

				let data = {
					venue_id: this.venue_id,
					formula_id: this.occupation_relation_id,
					code_id: this.offlist.id,
					code_no: this.offlist.code_no,
					consume_date: this.formattedDate,
					bracelet_mode: this.add_Tab,
					bracelet_id: this.bracelet_ids,
					bracelet_no: this.bracelet_no,
					bracelet_list: this.multiBraceletlist,
					price: this.price,
					paid: this.getTotalPrice(),
					consume_num: this.consume_num,
					remark: this.remark
				}
				console.log(data, 'data')
				let result = await venues.consume_ticket(data);
				if (result.code == 1) {
					// uni.navigateBack();
					if (this.add_Tab == '1') {
						this.showInfo = true
						this.pay_list()
						this.consumelist = result.data
					} else {
						uni.$u.toast(result.info)
						setTimeout(() => {
							uni.navigateBack();
						}, 1000)
					}

				} else {
					uni.$u.toast(result.info)
				}
			},
			async onClick2() {
				console.log(this.multiBraceletlist)
				console.log(this.offlist, 'this.offlist')
				console.log(this.occupation_relationlist)
				let that = this;

				//如果发放手环，那么手环数量要和填写的数量一致
				if (this.add_Tab == '1') {
					this.consume_num = this.bracelet_ids.length
					if (this.consume_num < 1) {
						uni.$u.toast('请刷手牌！')
						return
					}
				}
				if (this.add_Tab == '2') {
					this.consume_num = this.total_num
					if (this.consume_num < 1) {
						uni.$u.toast('请输入核销数量！')
						return
					}
				}

				let data = {
					venue_id: this.venue_id,
					formula_id: this.occupation_relation_id,
					code_id: this.offlist.id,
					code_no: this.offlist.code_no,
					consume_date: this.formattedDate,
					bracelet_mode: this.add_Tab,
					bracelet_id: this.bracelet_ids,
					bracelet_no: this.bracelet_no,
					bracelet_list: this.multiBraceletlist,
					price: this.price,
					paid: this.getTotalPrice(),
					consume_num: this.consume_num,
					remark: this.remark
				}
				console.log(data, 'data')
				let result = await venues.consume_card(data);
				if (result.code == 1) {
					if (this.add_Tab == '1') {
						this.showInfo = true
						this.pay_list()
						this.consumelist = result.data
					} else {
						setTimeout(() => {
							uni.navigateBack();
						}, 1000)
						uni.$u.toast(result.info)
					}
				} else {
					uni.$u.toast(result.info)
				}
			},
			async onClick4() {
				console.log(this.multiBraceletlist)
				console.log(this.offlist, 'this.offlist')
				console.log(this.occupation_relationlist)
				let that = this;

				//如果发放手环，那么手环数量要和填写的数量一致
				if (this.add_Tab == '1') {
					this.consume_num = this.bracelet_ids.length
					if (this.consume_num < 1) {
						uni.$u.toast('请刷手牌！')
						return
					}
				}
				if (this.add_Tab == '2') {
					this.consume_num = this.total_num
					if (this.consume_num < 1) {
						uni.$u.toast('请输入核销数量！')
						return
					}
				}

				let data = {
					venue_id: this.venue_id,
					formula_id: this.occupation_relation_id,
					code_id: this.offlist.id,
					code_no: this.offlist.code_no,
					consume_date: this.formattedDate,
					bracelet_mode: this.add_Tab,
					bracelet_id: this.bracelet_ids,
					bracelet_no: this.bracelet_no,
					bracelet_list: this.multiBraceletlist,
					price: this.price,
					paid: this.getTotalPrice(),
					consume_num: this.consume_num,
					remark: this.remark
				}
				console.log(data, 'data')
				let result = await venues.consume_train(data);
				if (result.code == 1) {
					uni.$u.toast(result.info)
					setTimeout(() => {
						uni.navigateBack();
					}, 1000)
				} else {
					uni.$u.toast(result.info)
				}
			},
			del_shoupai() {
				this.occupation_relation = ''
			},
			// 记账方式
			async pay_list() {
				let params = {
					venue_id: this.venue_id
				}
				let res = await venues.pay_list(params)
				if (res.code === 1) {
					this.pay_List = res.data.pay_list
					this.payChoose = res.data.pay_list[0]
					console.log(this.payChoose, 'this.payChoose')
				}
			},
			tabClick(e) {
				let that = this
				that.not_use = e.index
				console.log(that.not_use, 'that.not_use')
			},
			closeInfo() {
				this.showInfo = false;
			},
			selectSpec3(index2, item2) {
				this.spcindex3 = index2
				this.payChoose = item2
			},

			selectSpec4(index2, item2) {
				this.spcindex4 = index2
				this.payChoose = item2
				console.log(this.payChoose, 'this.payChoose222')
			},

		}
	}
</script>

<style lang="scss" scoped>
	.confirm-write-offs {
		min-height: 100vh;
		background-color: rgb(243, 243, 243);
		padding-bottom: 130rpx;

		.scroll-view_H {
			.item {
				margin-bottom: 30rpx;

				.info {
					margin-left: 20rpx;

					.name {
						font-size: 26rpx;
						font-weight: 500;
						color: #333333;
					}

					.phone {
						font-size: 24rpx;
						font-weight: 500;
						color: #bebebe;
						margin-top: 10rpx;
					}
				}
			}

			.checkbox .wx-checkbox-input {
				border-radius: 30upx;
				/* 圆角 */
				width: 30upx;
				/* 背景的宽 */
				height: 30upx;
				/* 背景的高 */
				border: 1px solid #ccc;
				background: #eee;
			}

			/* 复选框禁用样式 */

			.checkbox .wx-checkbox-input-disabled {
				border-radius: 30upx;
				/* 圆角 */
				width: 30upx;
				/* 背景的宽 */
				height: 30upx;
				/* 背景的高 */
				background: #f3f3f3;
				border: 1px solid rgba(201, 201, 201, 1);
			}

			/* 复选框选中后样式 */

			.checkbox .wx-checkbox-input.wx-checkbox-input-checked {
				background: rgba(255, 129, 92, 1);
				border: 1px solid rgba(255, 129, 92, 1);
			}

			/*checkbox选中后图标样式 */

			.checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
				width: 30upx;
				height: 30upx;
				line-height: 30upx;
				text-align: center;
				font-size: 24upx;
				color: #fff;
				background: transparent;
				transform: translate(-50%, -50%) scale(1);
				-webkit-transform: translate(-50%, -50%) scale(1);
			}

			/deep/ checkbox .wx-checkbox-input {
				border-radius: 50% !important;
				color: #ffffff !important;
			}

			/deep/ checkbox .wx-checkbox-input.wx-checkbox-input-checked {
				color: #fff;
				background: #2851F3;
			}

			/deep/.wx-checkbox-input.wx-checkbox-input-checked {
				border: none !important;
			}
		}

		.list222 {
			margin-top: 20rpx;
			padding: 20rpx 10rpx;
			background-color: rgb(255, 255, 255);
			box-shadow: 0px 0px 6.48rpx 2.52rpx rgba(0, 0, 0, 0.04);
			border-radius: 10rpx;

			.item.active {
				/* 激活时的样式 */
			}

			.item.disabled {
				/* 禁用时的样式 */
				background-color: #f3f3f3;
				color: #888;
			}

			.cursor-not-allowed {
				cursor: not-allowed;
			}

			.text-gray {
				color: #888;
			}

			.item {
				padding: 15rpx 20rpx;
				border-radius: 27rpx;
				border: solid 5rpx rgb(229, 229, 229);


				&+.item {
					margin-top: 30rpx;
				}

				&.active {
					// background: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391246929552989118.png') left top/100% 100% no-repeat;
					border: 5rpx #2979ff solid;
					// border: none;
				}

				.text_11 {
					font-size: 28rpx;
				}

				.text_12 {
					font-size: 26rpx;
					margin-bottom: 10rpx;
				}

				.text_13 {
					font-size: 26rpx;
				}
			}
		}

		.user {
			padding: 30rpx;
			background-color: #fff;

			.user-name {
				font-size: 28rpx;
				font-weight: 700;
				line-height: 27rpx;
			}

			.tel {
				margin-top: 20rpx;
				color: rgb(51, 51, 51);
				font-size: 22rpx;
				font-weight: 500;
				line-height: 17rpx;
			}
		}

		.section_1 {
			padding: 20rpx;

			.tab-filter {
				background-color: #ffffff;
				padding: 0 32rpx 20rpx 32rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

			.tabs {
				display: flex;
				border-bottom: 2rpx solid #f0f0f0;
			}

			.tab-item {
				padding: 16rpx 20rpx;
				margin-right: 32rpx;
				position: relative;
				font-size: 26rpx;
			}

			.tab-item.active {
				color: #2979ff;
			}

			.tab-item.active::after {
				content: '';
				position: absolute;
				bottom: -2rpx;
				left: 0;
				right: 0;
				height: 4rpx;
				background-color: #2979ff;
			}
		}

		.section_2 {
			padding: 30rpx;
			background-color: rgb(255, 255, 255);
			box-shadow: 0px 0px 9rpx rgba(0, 0, 0, 0.05);
			border-radius: 16rpx;

			.text_4 {
				font-size: 28rpx;
				font-weight: 700;
				line-height: 27rpx;
			}

			.text_5 {
				margin-top: 24rpx;
				font-size: 26rpx;
				font-weight: 500;
				line-height: 24rpx;
			}

			.text_6 {
				font-size: 30rpx;
				font-weight: 700;
			}
		}

		.section_3 {
			padding: 30rpx;
			background-color: rgb(255, 255, 255);
			box-shadow: 0px 0px 9rpx rgba(0, 0, 0, 0.05);
			border-radius: 16rpx;
			margin: 20rpx 0;

			.text_7 {
				font-size: 28rpx;
				font-weight: 700;
				line-height: 27rpx;
				margin-bottom: 20rpx;
			}

			.group_9 {
				margin: 40rpx 0;
				height: 52rpx;

				.number {
					margin: 0 40rpx;
					height: 100%;
					font-weight: bold;
				}
			}

			.list {
				height: 460rpx;

				.item {
					background-color: rgb(243, 243, 243);
					border-radius: 100px;
					font-size: 28rpx;
					padding: 20rpx 35rpx;

					.del_na {
						position: absolute;
						z-index: 999;
						right: 30rpx;
					}

					&+.item {
						margin-top: 30rpx;
					}
				}
			}
		}

		.section_8 {
			padding: 30rpx;
			background-color: rgb(255, 255, 255);
			box-shadow: 0px 0px 9rpx rgba(0, 0, 0, 0.05);
			border-radius: 16rpx;

			.name {
				font-size: 16px;
				font-weight: bold;
			}

			.row {
				box-sizing: border-box !important;
				display: flex !important;
				flex-direction: row !important;
				flex-wrap: wrap;
			}

			[class*='col-'],
			[class*='span-'],
			[class*='span24-'] {
				min-height: 1px;
				box-sizing: border-box !important;
			}

			.keyname {
				font-size: 16px;
				font-weight: bold;
			}

			textarea {
				width: 100%;
				font-size: 28rpx;
				height: 250rpx;
			}
		}

		.btn {
			position: fixed;
			bottom: 40rpx;
			left: 0;
			width: 100%;
			padding: 0 40rpx;
		}

		.store-popup {
			height: 50vh;
			padding: 20rpx 0;

			.form {
				box-sizing: border-box;
				// height: 10vh;

				.tag-list {
					display: flex;
					flex-wrap: wrap;
					margin-left: 30rpx;
				}

				.spec-value {
					padding: 5rpx 14rpx;
					margin: 5px;
					border: #f0f0f0 1rpx solid;
					font-size: 28rpx;
				}

				.text_color {
					padding: 5rpx 14rpx;
					margin: 5px;
					color: #2672eb;
					border: 1rpx solid #2672eb;
					font-size: 28rpx;
				}

				.text_color1 {
					padding: 5rpx 14rpx;
					margin: 5px;
					color: #2672eb;
					border: 1rpx solid #ffffff;
					font-size: 28rpx;
				}

				.item {
					padding: 0rpx 30rpx;
					background-color: white;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 15rpx;
					}

					.item-con {
						flex: 1;
						width: 0;
						font-size: 26rpx;
						padding: 40rpx 0;
						color: #333333;
						border-bottom: 1px solid #EFEFEF;

						.pirce {
							color: #888888;
						}
					}

					radio {
						transform: scale(0.8);
					}
				}
			}

			.item {
				margin-top: 30rpx;

				.info {
					margin-left: 20rpx;

					.name {
						font-size: 26rpx;
						font-weight: 500;
						color: #333333;
					}

					.phone {
						font-size: 24rpx;
						font-weight: 500;
						color: #bebebe;
						margin-top: 10rpx;
					}
				}
			}

			.title {
				padding: 0px 30rpx;
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
				border-bottom: 1px solid #cccccc;
				font-weight: bold;

				.clo {
					color: #2f75fa;
				}
			}

			.btn {
				padding: 0px 30rpx;
				margin-top: 20rpx;
			}

			.footer1 {
				position: absolute;
				width: 100%;
				left: 0;
				bottom: 0;
				padding: 20rpx 30rpx 60rpx 30rpx;
				// background-color: white;

				.btn {
					text-align: center;
					width: 100%;
					padding: 22rpx 0;
					// background: linear-gradient(0deg, #FC484C, #F72746);
					border-radius: 50rpx;
					background: linear-gradient(270deg, #699cfa 0%, #6499fa 100%, #2f75fa 0%);
					// border-radius: 19px;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
				}

				.btn_t {
					text-align: center;
					width: 100%;
					padding: 22rpx 0;
					background: linear-gradient(0deg, #b6b6b6, #b6b6b6);
					border-radius: 19px;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
		}
	}
</style>